{{ define "css" }}
{{ end }}
{{ define "js" }}
  <script src="https://www.google.com/recaptcha/api.js" async></script>

  <script>
    function onSubmit(token) {
      var form = document.getElementById("login_form")
      if (form.reportValidity()) {
        form.submit()
      }
    }

    var params = new URLSearchParams(window.location.search)
    var emailParam = params.get("email")
    var emailInput = document.getElementById("email")

    if (emailParam && emailParam.length && emailInput && !emailInput.value) {
      emailInput.value = emailParam
    }

    var forgotPWLink = document.getElementById("forgotPasswordLink")
    emailInput.addEventListener("input", function (ev) {
      if (ev.target.value && ev.target.value.length) {
        updateEmailLink(ev.target.value)
      }
    })
    if (emailInput && emailInput.value && emailInput.value.length) {
      updateEmailLink(emailInput.value)
    }
    function updateEmailLink(value) {
      if (value && value.length) {
        forgotPWLink.setAttribute("href", "/requestReset?email=" + encodeURI(value))
      } else {
        forgotPWLink.setAttribute("href", "/requestReset")
      }
    }
  </script>
{{ end }}

{{ define "content" }}
  {{ with .Data.AuthData }}
    <div class="container mt-2">
      <div class="row my-3">
        <div class="col-lg-6 col-sm-8 col-xl-5 mx-auto">
          <h1 class="h2">Sign in to <i>beaconcha.in</i></h1>
          <p>Manage and track the progress of your validator.</p>
          {{ if .Flashes }}
            {{ range $i, $flash := .Flashes }}
              <div class="alert {{ if contains $flash "Error" }}alert-danger{{ else }}alert-success{{ end }} alert-dismissible fade show my-3 py-2" role="alert">
                <div class="p-2">{{ $flash | formatHTML }}</div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            {{ end }}
          {{ end }}
          <form id="login_form" action="/login" method="POST">
            {{ .CsrfField }}
            <div class="form-group">
              <label for="email">Email address</label>
              <input tabindex="1" required inputmode="email" type="text" maxlength="100" class="form-control" autocomplete="email" id="email" name="email" autofocus />
            </div>
            <div class="form-group">
              <label class="d-flex justify-content-between align-items-center" for="password">
                <span>Password</span>
                <a id="forgotPasswordLink" tabindex="5" href="/requestReset">Forgot Password?</a>
              </label>
              <input tabindex="2" required type="password" maxlength="256" class="form-control" autocomplete="current-password" id="password" name="password" />
            </div>
            <input type="hidden" value="{{ $.Data.RedirectData.Redirect_uri }}" name="oauth_redirect_uri" />
            <input type="hidden" value="{{ $.Data.RedirectData.State }}" name="state" />
            <button data-sitekey="{{ .RecaptchaKey }}" data-callback="onSubmit" tabindex="3" type="submit" class="g-recaptcha btn btn-primary float-right">Login</button>
          </form>
          <span style="font-size: 90%;" class="text-muted">Don't have an account? </span><a tabindex="4" href="/register">Sign up</a>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
